<template>
  <div class="leftside height_100" @click="$store.commit('common/set_showLittlePopup')">
    <div class="avatar cp">
      <avatar :personalInfo="'self'" :imgID="$store.state.user.userInfo.user_img" :id="$store.state.user.userInfo.user_id"></avatar>
    </div>
    <ul class="navList">
      <li v-for="nav in navList" :key="nav.name" class="flex-center" @click="changePath(nav.path,nav.name)">
        <div class="navbox flex-column">
          <img class="navImg"
            :src="selected === nav.name ? require('@/assets/home/'+ nav.name + 'Selected.png') : require('@/assets/home/'+ nav.name + '.png')"
            alt="">
          <span class="navName" :class="selected === nav.name ? 'selected':''">{{ switchNav(nav.name) }}</span>
          <div v-if="unreadCount && nav.name === 'addressList'" class="unread">
            <span>{{ unreadCount }}</span>
          </div>
          <div v-if="unreadMessage && nav.name === 'message'" class="unread">
            <span>{{ unreadMessage > 99 ? '99+' : unreadMessage }}</span>
          </div>
        </div>
      </li>
      <li class="more flex-center" tabindex="399"  @focus="showMoreOperation = true" @blur="showMoreOperation = false">
        <div class="navbox flex-column">
          <img class="navImg" :src="require('@/assets/home/more.png')" alt="">
          <div class="navName" >更多
            <ul class="operation" v-if="showMoreOperation">
              <li class="flex-start cp" @click="selectOperation(item.id)" v-for="item in operationList" :key="item.id">
                <img class="operaImg" :src="item.src" alt="">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <setting-dialog ref="settingDialog"></setting-dialog>
    <feedback-dialog ref="feedbackDialog"></feedback-dialog>
    <download-dialog ref="downloadDialog"></download-dialog>
    <personal-info @showInvitationCode="ifShowMyInvitationCode = true" v-show="ifShowPersonalInfo" @showLogout="ifShowLogout = true"></personal-info>
    <myInvitationCode v-show="ifShowMyInvitationCode" @closeInvitationCode="ifShowMyInvitationCode = false"></myInvitationCode>
    <logout @cancelLogout="ifShowLogout = false" v-show="ifShowLogout"></logout>
  </div>
</template>

<script>
import settingDialog from './moreComponents/settingDialog'
import feedbackDialog from './moreComponents/feedbackDialog'
import downloadDialog from './moreComponents/downloadDialog'
import personalInfo from './personalInfo'
import myInvitationCode from './myInvitationCode'
import logout from './logout'

export default {
  components: {
    settingDialog,
    feedbackDialog,
    downloadDialog,
    personalInfo,
    myInvitationCode,
    logout
  },
  data () {
    return {
      selected: '',
      operationId: '',
      showMoreOperation: false,
      // 是否显示我的邀请码
      ifShowMyInvitationCode: false,
      // 是否显示退出登录弹窗
      ifShowLogout: false
    }
  },
  computed: {
    navList () {
      // 路由表的首页侧边导航
      return this.$router.options.routes.filter(item => item.name === 'home')[0].children
    },
    operationList () {
      return [
        { name: '设置', id: 0, src: require('@/assets/home/moreOperation/setting.png') },
        { name: '意见反馈', id: 1, src: require('@/assets/home/moreOperation/feedback.png') },
        { name: '下载APP', id: 2, src: require('@/assets/home/moreOperation/download.png') }
      ]
    },
    // 头像
    avatarSrc () {
      return this.$store.state.user.userInfo.user_img
    },
    // 未处理好友请求数量
    unreadCount () {
      return this.$store.getters['addressList/unreadReal']
    },
    // 未读的好友消息数量
    unreadMessage () {
      return this.$store.getters['chatInformation/unreadMsgCount']
    },
    // 是否显示个人信息窗口
    ifShowPersonalInfo () {
      return this.$store.state.common.ifShowPersonalInfo
    }
  },
  watch: {
    $route: {
      deep: true,
      handler (val, oldVal) {
        if (val.matched[1].path !== oldVal.matched[1].path) {
          this.changePath(val.matched[1].path, val.matched[1].name)
        }
      }
    }
  },
  mounted () {
    this.changePath(this.$route.matched[1].path, this.$route.matched[1].name)
  },
  methods: {
    switchNav (name) {
      let navName = ''
      switch (name) {
        case 'conference':
          navName = '会议'
          break
        case 'message':
          navName = '消息'
          break
        case 'addressList':
          navName = '通讯录'
          break
        case 'file':
          navName = '文档'
          break
      }
      return navName
    },
    changePath (path, name) {
      this.selected = name
      this.$router.push(path)
    },
    selectOperation (operationId) {
      this.operationId = operationId // 可能用于点击状态
      this.showMoreOperation = false
      switch (operationId) {
        case 0:
          this.$refs.settingDialog.toggleShowDialog()
          break
        case 1:
          this.$refs.feedbackDialog.toggleShowDialog()
          break
        case 2:
          this.$refs.downloadDialog.toggleShowDialog()
          break
        default:
          break
      }
    },
    // 查看个人信息
    showPersonalInfo () {
      this.$store.commit('common/set_ifShowPersonalInfo')
    }
  }
}
</script>
<style lang="scss" scoped>
.leftside {
  // z-index: 101;
  float: left;
  width: 72px;
  background: linear-gradient(316deg, #4a53ef, #6971fe 100%);
  position: relative;

  .avatar {
    margin: 48px auto 60px;
    width: 40px;
    height: 40px;
  }

  ul.navList {
    height: calc(100% - 148px);
    position: relative;
    li {
      width: 72px;
      height: 72px;
      cursor: pointer;
      position: relative;

      .navbox {
        img.navImg {
          width: 26px;
          height: 26px;
          margin: 0 auto;
        }

        .navName {
          font-size: 12px;
          height: 17px;
          font-weight: 400;
          text-align: center;
          color: rgba(255, 255, 255, 0.50);
          line-height: 17px;
        }

        .selected {
          color: #ffffff;
        }
        .unread {
          position: absolute;
          right: 14px;
          top: 8px;
          height: 14px;
          span {
            position: absolute;
            height: 200%;
            line-height: 28px;
            font-size: 20px;
            color: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            padding: 0 8px;
            background-color: #FF3E6D;
            border-radius: 14px;
          }
        }
      }
    }
    li.more{
      position: absolute;
      width: 100%;
      bottom: 20px;
      outline: none;
      .navName{
        position: relative;
        ul.operation{
          width: 198px;
          padding: 4px;
          background: #ffffff;
          box-shadow: 4px 0px 12px 0px #d8dee9;
          position: absolute;
          bottom: 0;
          right: -230px;
          li{
            width: 100%;
            height: 44px;
            padding-left: 30px;
            img.operaImg{
              width: 24px;
              height: 24px;
            }
            span{
              margin-left: 12px;
              height: 24px;
              font-size: 14px;
              text-align: left;
              color: #0D172C;
              line-height: 24px;
            }
            &:hover{
              background: rgba(48, 78, 236, 0.03);
            }
          }
        }
      }
    }
  }
}
</style>
